Grid.css is a small, responsive, and mobile-first CSS grid with a 12-column layout based on Flexbox.
Grid.css aims to be fast, easy to use, with no unnecessary features and a minimal footprint, making it the perfect foundation for any project.
To get started, simply include grid.min.css
in your website's <head>
before any other stylesheet. You can include it manually or alternatively from a CDN.
<link rel="stylesheet" href="grid.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/smrlo/grid.css/grid.min.css">
Grid.css has a responsive and mobile-first 12-column
layout, that can be set up with a default width or a full page width (see maximum width at the various breakpoint in the table below).
To set up the layout you first define the container, then within the container add the rows, and finally within each row add and define the columns.
<!-- default width -->
<div class="container">
...
</div>
<!-- full page width -->
<div class="container-full">
...
</div>
<div class="container">
<div class="row">
...
</div>
</div>
To set up a column add the class col
and then define the various column's size at the different breakpoints with c-*
, s-*
, m-*
, l-*
, xl-*
, xxl-*
. Replace *
with a number between 1-12
to define a specific column's width (e.g. c-2); use 0 to hide the column (i.e. c-0); or use fx
for a flexible column (i.e. c-fx). The default size c-*
must always be defined.
Example: using c-2
instructs the column to span for a width of 2 spaces; c-5
instructs the column to span for a width of 5 spaces; xl-2
instructs the column to span for a width of 2 spaces when the screen size is ≥1200px; using xl-2 xxl-4
instructs the column to span for a width of 2 spaces when the screen size is ≥1200px, then 4 spaces when the screen size is ≥ 1400px.
<div class="container">
<div class="row">
<div class="col c-12 s-6 m-6 l-4 xl-4 xxl-6"> ... </div>
<div class="col c-0 s-6 m-3 l-4 xl-4 xxl-6"> ... </div>
<div class="col c-0 s-0 m-3 l-4 xl-4 xxl-0"> ... </div>
</div>
</div>
Screen size | Max width container |
Max width container-full |
Class prefix |
---|---|---|---|
<576px | 100% | 100% | c-* |
≥576px | 540px | 100% | s-* |
≥768px | 720px | 100% | m-* |
≥992px | 960px | 100% | l-* |
≥1200px | 1140px | 100% | xl-* |
≥1400px | 1320px | 100% | xxl-* |
Contributing guidelines: be kind, be helpful.
Found a bug or have any suggestions? Please open a new issue.